<template>
  <div class="album-list">
    <div class="header">
      <h2>专辑列表</h2>
      <el-input
        v-model="searchKeyword"
        placeholder="搜索专辑"
        style="width: 300px"
        @keyup.enter="handleSearch"
      >
        <template #append>
          <el-button icon="Search" @click="handleSearch" />
        </template>
      </el-input>
    </div>

    <div class="album-grid">
      <el-card
        v-for="album in albums"
        :key="album.id"
        class="album-card"
        @click="goToAlbumDetail(album.id)"
      >
        <div class="album-cover">
          <img
            :src="album.picUrl"
            :alt="album.name"
            @error="handleImageError"
          />
        </div>
        <div class="album-info">
          <h3 class="album-name">{{ album.name }}</h3>
          <p class="album-singer">{{ album.singer }}</p>
          <p class="album-publish-time">{{ formatDate(album.publishTime) }}</p>
        </div>
      </el-card>
    </div>

    <div class="pagination" v-if="albums.length > 0">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        layout="prev, pager, next, jumper, ->, total"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

export default {
  name: 'AlbumList',
  setup() {
    const router = useRouter()

    // 数据状态
    const albums = ref([])
    const loading = ref(false)
    const searchKeyword = ref('')

    // 分页相关
    const currentPage = ref(1)
    const pageSize = ref(20)
    const total = ref(0)

    // 模拟获取专辑列表（需要后端API支持）
    const fetchAlbums = async () => {
      try {
        loading.value = true
        await new Promise(resolve => setTimeout(resolve, 500))

        // 模拟数据
        const mockAlbums = Array.from({ length: 4 }, (_, index) => ({
          id: index + 1,
          name: `专辑名称 ${index + 1}`,
          singer: `歌手 ${(index % 5) + 1}`,
          publishTime: new Date(Date.now() - Math.floor(Math.random() * 365) * 24 * 60 * 60 * 1000),
          picUrl: ''
        }))

        albums.value = mockAlbums
        total.value = 100
      } catch (error) {
        ElMessage.error('获取专辑列表失败: ' + error.message)
      } finally {
        loading.value = false
      }
    }

    // 搜索专辑
    const handleSearch = () => {
      currentPage.value = 1
      fetchAlbums()
    }

    // 处理分页变化
    const handlePageChange = (page) => {
      currentPage.value = page
      fetchAlbums()
    }

    // 跳转到专辑详情页
    const goToAlbumDetail = (albumId) => {
      router.push(`/album/${albumId}`)
    }

    // 处理图片加载错误
    const handleImageError = (e) => {
      e.target.src = ''
    }

    // 格式化日期
    const formatDate = (date) => {
      if (!date) return ''
      return new Date(date).toLocaleDateString()
    }

    // 初始化加载
    onMounted(() => {
      fetchAlbums()
    })

    return {
      albums,
      loading,
      searchKeyword,
      currentPage,
      pageSize,
      total,
      handleSearch,
      handlePageChange,
      goToAlbumDetail,
      handleImageError,
      formatDate
    }
  }
}
</script>

<style scoped>
.album-list {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h2 {
  margin: 0;
}

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.album-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.album-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.album-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
  border-radius: 4px;
}

.album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.album-info {
  padding: 15px 10px 10px;
}

.album-name {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-singer {
  margin: 0 0 5px 0;
  color: #666;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.album-publish-time {
  margin: 0;
  color: #999;
  font-size: 12px;
}

.pagination {
  display: flex;
  justify-content: center;
}
</style>
